Applying icons 應用圖示

Icon & Material Symbol styles 圖示的樣式

有三種樣式可供選擇:輪廓式、圓角式和尖角式

Outlined style   輪廓樣式

帶輪廓的符號採用描邊和填充設計,呈現輕盈簡潔的風格,適合密集介面。描邊粗細可調整,可與排版字型相配。

2dp描邊的圖示在不同尺寸場景中能保持清晰可辨
為了保持圖示的易讀性和辨識度,一部分圖示保持實心填充狀態,比如全身人像圖示或專有圖示
這些帶輪廓的符號較細的筆畫與該應用排版中的細線相呼應

Rounded and sharp styles  圓潤和尖銳的風格

圓形符號適用於重字型、弧形標誌或圓形元素的品牌。尖銳符號用直邊展示拐角,在小尺寸下保持清晰,適合無法用圓形表達的品牌風格。

圓角風格
直角風格
採用了圓角按鈕和圓角圖示
尖銳風格圖示0dp圓角與該應用的細節互相呼應

Customizing Symbols  自定義符號

圖示有四個可調節的樣式可變字型屬性,稱為軸axes。軸是一個印刷術語,指的是符號的一種屬性,可透過改變該屬性來創造視覺上的變化。

1 Weight

“重量”定義了符號的筆畫粗細,其權重範圍在細(100)到粗(700)之間。權重也會影響符號的整體大小。

一個圖示的不同重量
常規粗細圖示-400重量
× 24dp的最小尺寸圖示,要使用200以上的重量避免過細
✓ 確保圖示重量的一致性
× 使用24dp圖示時注意不要使用過粗的字型
× 避免圖示的重量不一致

2Fill  填充

填充功能讓你能夠從一種更具輪廓感的風格轉變為反轉風格或更飽滿的填充風格。填充屬性可用於傳達過渡狀態,如未填充和已填充狀態。其值範圍從 0 到 1,其中 1 表示完全填充。填充屬性與線寬一樣,是影響符號整體外觀的主要屬性。

填充值為0
填充值為1
帶有在選中和未選中下填充符號的底部導航欄

3 Grade 等級

灰度是一種更精細的粗細調整方式,對符號大小影響較小。文字和符號的灰度等級可以匹配以獲得和諧效果,比如都使用 -25 的值。

1 0級,圖示的粗細不會改變 2 在負等級,符號的粗細看起來更淺

等級可以調整視覺滲色,使圖示在不同背景上看起來大小一致。淺色背景上深色圖示預設為0,深色背景上淺色圖示預設為-25。

淺色主題下使用 0 級符號的圖示
深色主題下使用 -25 級符號的圖示

要使筆畫更粗且更突出,可使用正值等級,比如在表現選中圖示狀態時。

選中的圖示選用正極來突出強調作用

4 Optical sizes  光學字號

光學尺寸範圍從 20dp 到 48dp。

為了使影象在不同尺寸下看起來相同,筆畫粗細(厚度)會隨著圖示尺寸的縮放而變化。光學尺寸提供了一種在增大或減小符號尺寸時自動調整筆畫粗細的方法。

四種字號大小 20dp 24dp 40dp 48dp(這裡的16是網格單位,都被放在相同的 16dp 網格系統 上以保持視覺對齊)

傳統上,圖示是從 24dp 的源向量進行縮放的,這導致放大後的圖示與原始圖示相比過於臃腫。透過視覺尺寸軸,在圖示尺寸增大時,你可以保持筆畫粗細(厚度)不變。

1 × 傳統縮放,2 ✓ 動態縮放(figma中按快捷鍵K,輸入數值)
在密集的檢視這使用24dp的光學尺寸
當需要突出主要操作時,使用40-48dp的較大尺寸符號

Using Material Symbols with typography 將材質符號與排版配合使用

材質符號的設計考慮因素與字型類似,並且經常與文字一同出現。選擇合適的圖示集可以將介面內容緊密聯絡起來,增強產品的品牌凝聚力。

文字和圖示應該保持一致的視覺權重大小
✓ 圖示與文字大小保持一致
✓ 保持圖示與文字使用相同的視覺重量
✓ 圖示的基線向下移動至文字大小的11.5%
× 避免圖示太小,文字過大
× 避免圖示與文字不同的視覺重量
× 避免文字與圖示使用相同的基線

Accessibility  無障礙

當符號較為抽象時,標籤文字可提供簡短且有意義的描述。這在導航情境中可能會很有幫助。

Icons with a label text帶有標籤文字的圖示

✓ 標籤文字提供簡短的描述,對導航特別有用
在圖示不能直接精準表達含義時,請謹慎設計成圖示下方不帶標籤文字

Small icons  小圖示

圖示在放大或縮小尺寸時不會失真。簡單的符號,比如用於評級的星星,只要能保持可識別性,就可以以任何尺寸單獨使用。

其他圖示應在其下方配有不超過 20dp(裝置獨立畫素)的文字標籤,以確保其含義清晰並保持可訪問性。這些符號包括:

Target size  目標尺寸

圖示周圍應留有足夠的空間,以確保其清晰可讀且便於互動。

預設情況下,24dp 的符號目標大小應為 48dp。

1 measurements 測量 2 Placement 佈局

Localizing icons  本地化圖示

為確保圖示在當地市場能有效傳達含義,需在不同年齡群體、不同文化及不同語言環境下對其進行測試,並遵循以下最佳實踐方法:

為本地市場翻譯圖示,例如不用地區在結賬體驗方面有不同的偏好

Cultural influence of colors and symbols 顏色和符號的文化影響

顏色和符號在不同文化中有不同含義。例如,白色在西方代表純潔,在東方則象徵哀悼;貓頭鷹在西方象徵智慧,在東方則被視為不祥。創作時需注意這些文化差異。